<template>
  <div class="sideBar">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      background-color="#000"
      text-color="#fff"
      router
      :collapse="isCollapse"
      :collapse-transition="false"
      active-text-color="#60b631">
      <h3 v-if="!isCollapse">卖家后台管理系统</h3>

      <el-menu-item index="/home">
        <i class="icon-shouye iconfont"></i>
        <span slot="title">首页</span>
      </el-menu-item>

      <el-menu-item index="/order">
        <i class="iconfont icon-dd"></i>
        <span slot="title">订单</span>
      </el-menu-item>

      <el-submenu index="2">
        <template slot="title">
          <i class="iconfont icon-toggle"></i>
          <span slot="title">菜单</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/menu">
            <i class="iconfont icon-shangpin"></i>
            <span>商品列表</span>
          </el-menu-item>
          <el-menu-item index="/menuType">
            <i class="iconfont icon-category"></i>
            <span>分类列表</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="3">
        <template slot="title">
          <i class="iconfont icon-yonghu1"></i>
          <span slot="title">用户</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/user">
            <i class="iconfont icon-yonghu"></i>
            <span>用户列表</span>
          </el-menu-item>
          <el-menu-item index="/admin">
            <i class="iconfont icon-guanliyuan"></i>
            <span>管理员列表</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="4">
        <template slot="title">
          <i class="iconfont icon-i_caiwu"></i>
          <span slot="title">财务</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/capital">
            <i class="iconfont icon-jinlingyingcaiwangtubiao61"></i>
            <span>资金流水</span>
          </el-menu-item>
          <el-menu-item index="/recharge">
            <i class="iconfont icon-chongzhi"></i>
            <span>充值管理</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="5">
        <template slot="title">
          <i class="iconfont icon-qita"></i>
          <span slot="title">其他</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/carousel">
            <i class="iconfont icon-tubiaozhizuomoban"></i>
            <span>轮播图</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>


    </el-menu>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: "SideBar",
    data() {
      return {
        activeIndex: this.$route.path,
      }
    },
    created() {
      console.log(this.$store.state.isCollapse)
    },
    computed: {
      ...mapState(['isCollapse'])
    }
  }
</script>

<style scoped lang="scss">
  .sideBar {
    height: 100vh;

    h3 {
      font-weight: bold;
      color: #fff;
      background: #000;
      width: 199px;
      height: 7%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 3%;
    }

    .el-menu {
      height: 100%;

      .el-submenu {
        .el-menu-item {
          min-width: 199px;
        }
      }
    }
  }

</style>
